<template>
	<div class="div">
		<van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
		<!-- :title="user.nickname" -->
		<van-nav-bar class="nav-bar" left-text="返回" left-arrow @click-left="onClickLeft" />

		<van-image class="dishes-image" width="100%" height="300" lazy-load :src="entity.dishesPhotoOrVideoUrl"
			alt="缺省图" />

		<p class="p-title" title="标题">{{entity.title}}
			<van-tag plain size="large" @click="addToFavorites()">收藏</van-tag>
		</p><br />

		<van-tag class="span" plain size="medium" title="分量">{{entity.weight}}</van-tag>
		<van-tag class="span" plain size="medium" title="口味">{{entity.taste}}</van-tag>
		<p title="销量">月售: {{entity.sales}}</p>
		<p title="口味">

		</p>




		<p title="价格">{{entity.price}}￥ 打包费￥{{entity.packingFeePerDish}}/1份
			<van-button type="warning" round @click="showOverlay()">选规格</van-button>
		</p>


		<van-overlay class="van-overlay" :show="show" @click="show = false">
			<div class="wrapper" @click="show=false">
				<div class="block">
					<p>{{entity.dishesName}}</p>
					<p>分量</p>
					<van-tag type="warning">{{entity.weight}} | ￥{{entity.price}}</van-tag>
					<p>配菜</p>
					<van-button><span style="color:#d4ba25;">{{entity.sideDishes}}</span></van-button>
					<p>已选规格</p>
					<p>总计￥{{this.totalAmount}}</p>
					<p></p>
					<van-tag type="warning">{{entity.discount}} 折扣</van-tag>
					<van-button @click="shoppingCartInsert()" type="warning" round block>加入购物车</van-button>
				</div>
			</div>
		</van-overlay>
		<van-tag plain type="danger">{{entity.discount}}折|限1份</van-tag>
		<!-- 	<van-button @click="getShoppingCartList()" class="button-fixed1" round type="info">
			￥{{}}预估另 需配送费￥{{}} ￥{{}}起送
		</van-button>-->
		<br />
		<van-collapse v-model="activeName" accordion>
			<van-submit-bar tip="预估另需配送费￥2, 起送价格￥20" label="合计" :price="totalAmount * 100" button-text="去结算"
				@submit="toSettleAccounts()">
				预估另 需配送费￥{{entity.deliveryFee}}
			</van-submit-bar>
			<!-- <van-collapse-item title="查看购物车" name="1">
				<div v-for="item in this.shoppingCartArray" :key="item">
					<div>{{item.shop.shopName}}</div>
					<div>{{item.dishes.dishesName}} <span>价格:￥{{item.dishes.price}}</span></div>
					<div>

						<van-field name="stepper" label="数量">

							<template #input>
								<van-stepper v-model="item.orderNumber" />
							</template>
						</van-field>
					</div>
				</div>
			</van-collapse-item> -->
		</van-collapse>
		<van-tabs class="div van-tabs" v-model:active="active" animated color="#1989fa" type="line"
			title-active-color="black" title-inactive-color="gray" swipeable="true" lazy-render="true">

			<van-tab class="van-tab1" title="详情">
				<br />
				<p title="掌柜描述">掌柜描述: {{entity.shopkeeperDescription}}</p>

				<p title="主料">主料: <span>{{entity.taste}}</span></p><br />
				<p title="荤素">荤素: {{entity.meatAndVegetable}}</p><br />
				<p title="分量">分量: <span>{{entity.weight}}</span></p>
				<p title="口味">口味: <span>{{entity.taste}}</span></p>
				<p title="价格说明">价格说明</p>
				<!-- -->
				<div class="div-box2">
					<h4 class="h4">外卖评价 <span class="span">(好评度{{entity.favorableRate}}%)</span> </h4>
					<span class="theNumberOfEvaluations">
						{{entity.theNumberOfEvaluations}}条评价</span>
				</div>

				<!-- 通用错误 -->
				<van-empty v-if="evaluationArray==''" description="暂时还没有评价" />
				<van-card class='van-card1' @click="toDishesDetails(item.id)" v-for="(item) in evaluation3Array"
					:key="item" lazy-load="true">
					<template #tags>
						<van-image round width="50px" height="50px" fit="cover" lazy-load
							:src="item.user.profilePhotoUrl" alt="缺省图" />
						<p class="nickname" title="用户昵称">{{item.user.nickname}}</p><br /><br />
						<p>{{item.evaluationDescribe}}</p>
						<!-- v-if="item.user.profilePhotoUrl != null" -->
						<van-image class="van-image1" width="340" fit="cover" lazy-load
							:src="item.videoOrImageUrlOfTheReview" alt="评价图" />
					</template>
				</van-card>
				<van-button round block @click="toEvaluationTab()">999+条外卖评价</van-button>
			</van-tab>
			<van-tab class="van-tab2" title="评价">
				<van-tag plain type="danger">有图</van-tag>
				<van-tag plain type="danger">好评</van-tag>差评
				<!-- 通用错误 -->
				<van-empty v-if="evaluationArray==''" description="暂时还没有评价" />
				<van-card class='van-card' @click="toDishesDetails(item.id)" v-for="(item) in evaluationArray"
					:key="item" lazy-load="true">
					<template #tags>
						<van-image round width="50px" height="50px" fit="cover" lazy-load
							:src="item.user.profilePhotoUrl" alt="缺省图" />
						<p class="nickname" title="用户昵称">{{item.user.nickname}}</p><br /><br />
						<p>{{item.evaluationDescribe}}</p>
						<van-image class="van-image1" width="340" lazy-load :src="item.videoOrImageUrlOfTheReview"
							alt="评价的图片">
							<template v-slot:error>加载失败</template>
						</van-image>
					</template>
				</van-card>
			</van-tab>
			<van-tab title="搭配">
				菜品搭配
			</van-tab>
		</van-tabs>
	</div>
</template>
<script>
	// import storage from '@/utils/localstorage'
	import qs from 'qs'
	import {
		// ref
	} from 'vue';
	import {
		Toast
	} from 'vant'
	export default {
		name: "DishesDetails",
		// setup() {
		// 	const show = ref(false);
		// 	return {
		// 		show
		// 	};
		// },
		data() {
			return {
				entity: {
					userId: 0,
					dishesId: 0,
					shopId: 0,
				}, //菜品
				//菜品规格
				dishSpecifications: [],
				collection: { //收藏
					userId: 0,
					dishesId: 0,
					shopId: 0,
					evaluationId: 0,
					distance: 2.5,
				},
				shoppingCart: { //购物车
					dishesId: 0,
					shopId: 0,
					userId: 0,
					orderNumber: 1
				},
				shoppingCartArray: [],
				dishesNumber: 1,
				evaluation3Array: [],
				evaluationArray: [],
				active: 0,
				show: false,
				totalAmount: 0.00,
				// totalAmount1:0,
				activeName: 1
			}
		},
		mounted() { //挂载之后执行的方法
			this.getDishesDetails();
			this.getEvaulationListLimit3()
			this.getEvaulationList();
			this.getShoppingCartList()
		},
		methods: {
			toSettleAccounts() { //去结账
				console.log("提交订单页面toSettleAccounts()");
				//转到购物车页面需要传的参数: 用户id，菜品id，店铺id
				this.$router.push({
					// path:'/shoppingCart',
					path: '/cart',
					query: {
						// userId: 1,
						dishesId: 1,
						shopId: 1
					}
				})
				// this.$axios.post('/orders/insert',qs.stringify(item))
				// .then(res=>{
				// 	if(res.result.data){
				// 		Toast.success('下单成功');
				// 	}
				// }).catch(e=>{
				// 	console.log(e);
				// })

				// //foreach遍历数组
				// this.shoppingCartArray.forEach(function(item, index) {


				// 	// console.log("item="+item);
				// 	console.log("item[" + index + "].title=" + item.dishes.price)
				// 	//item 就是当日按循环到的对象
				// 	//index是循环的索引，从0开始
				// })
			},
			getShoppingCartList() {
				this.entity.shopId = this.$route.query.shopId;
				console.log("this.entity.shopId=" + this.entity.shopId)
				this.entity.userId = this.$route.query.id;
				console.log("userId=" + this.entity.userId + ",shopId=" + this.entity.shopId);
				this.$axios.get('/shopping-cart/findByShop', {
						params: {
							userId: 1,
							shopId: this.entity.shopId
						}
					})
					.then(res => {
						// order_id	int	订单id
						// user_address	string	顾客收货地址
						// dishes_photo_or_video_url	string	菜品图片路径
						// dishes_name	string	菜品名
						// shop_address.string	店铺地址
						// shop_name	string	店铺名
						// number	int	订单数量
						// order_time	LocalDateTime	下单时间
						// console.log("data=" + res)
						this.shoppingCartArray = res.result.list;
						let totalAmount = 0.00;
						//						//foreach遍历数组
						//						this.shoppingCartArray.forEach(function(item, index) {
						//							totalAmount += item.dishes.price
						//							// console.log("item="+item);
						//							console.log("item[" + index + "].title=" + item.dishes.price)
						//							//item 就是当日按循环到的对象
						//							//index是循环的索引，从0开始
						//						})
						this.totalAmount = totalAmount;
						console.log("totalAmount=" + this.totalAmount);
						/*alert(res.list);*/
						// console.log("this.entity.dishesName="+this.entity.dishesName);
						// console.log("res.result.list=" + res.result.list);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			shoppingCartInsert() {
				console.log("添加购物车");
				this.shoppingCart.dishesId = this.entity.id;
				this.shoppingCart.shopId = this.entity.shopId;
				// this.shoppingCart.userId = 1; //
				this.shoppingCart.orderNumber = 1; //
				console.log("this.shoppingCart.shopId=" + this.shoppingCart.shopId + ",+userId=" + this.shoppingCart
					.userId)
				this.$axios.post('/shopping-cart/insert', (this.shoppingCart))
					.then(res => {
						console.log(res);
						Toast.success("加入购物车成功")
					}).catch(e => {
						console.log(e);
						this.$message({
							message: "您的购物车已达到限制数量!",
							type: "warning"
						})
					})
			},
			showOverlay() {
				this.show = true;
				console.log("getTotalAmount");
				this.totalAmount = (this.entity.price + this.entity.packingFeePerDish) * this.entity.discount * 0.1

				console.log("totalAmount=" + this.totalAmount);
			},
			toOrderPage() {
				let dishesId = this.$route.query.dishesId;
				let shopId = this.$route.query.shopId;
				let userId = this.$route.query.userId;
				this.$router.push({
					path: '/order',
					query: {
						dishesId: dishesId,
						shopId: shopId,
						userId: userId
					}
				})
			},
			getDishesDetails() {
				this.entity.shopId = this.$route.query.shopId;
				let dishesId = this.$route.query.id;
				console.log("dishesId=" + dishesId);
				this.$axios.get('/dishes/details/' + dishesId)
					.then(res => {
						// console.log("data=" + res)
						this.entity = res.result.data;
						// console.log("this.entity.dishesName="+this.entity.dishesName);
						// console.log("this.entity.favorableRate=" + this.entity.favorableRate);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			getEvaulationListLimit3() {
				let dishesId = this.$route.query.id;
				console.log("dishesId=" + dishesId);
				this.$axios.get('/evaluation/page/' + dishesId, {
						params: {
							size: 3
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.evaluation3Array = res.result.data.records;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			getEvaulationList() {
				let dishesId = this.$route.query.id;
				console.log("dishesId=" + dishesId);
				this.$axios.get('/evaluation/page/' + dishesId, {
						params: {
							size: 10
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.evaluationArray = res.result.data.records;
						// console.log("this.evaluationArray.length=" + this.evaluationArray.length);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			toEvaluationTab() {
				this.active = 1;
			},
			addToFavorites() { //收藏菜品
				// this.collection.userId = this.$route.query.userId;
				this.collection.userId = 1;
				this.collection.dishesId = 1;
				// this.collection.dishesId = this.$route.query.dishesId;
				this.collection.shopId = 1;
				// this.collection.shopId = this.$route.query.shopId;
				// this.collection.evaluationId = this.$route.query.evaluationId;
				this.$axios.post('/collection/save', qs.stringify(this.collection))
					.then(res => {
						console.log(res);
						Toast.success("收藏成功")
					}).catch(e => {
						this.$message({
							message: e,
							type: "warning"
						})
					})
			},
			onClickLeft() {
				history.back()
			},

		}
	}
</script>

<style scoped>
	body {
		margin: 0px 0px 0px 0px;
		padding: 0px;
	}

	.div {
		/* position: relative; */
		margin-bottom: 40px;
		/* width: 100%; */
		/* height: 100%; */
	}

	.dishes-image {
		/* 
		margin: 0px 0px 0px -6px;
		width: 400px; */
		/* margin: 0px 0px 0px -6px; */
		/* border: 1px red solid; */
	}

	.van-overlay {
		/* z-index: 10; */
		--van-overlay-background-color: rgba(0, 0, 0, 0.3);
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.block {
		/* width: 320px; */
		height: 500px;
		background-color: #fff;
	}

	.van-card1 {}

	.van-card {
		margin: 30px 0px 30px 0px;
		--van-card-background-color: var(--van-gray-1);
		/* border: 1px red solid; */
	}

	/* .p-title{
		margin: 0px 0px 0px 0px;
	} */
	p,
	.h4,
	.span {
		margin: 0px 10px 0px 20px;
	}

	span {
		margin: 10px 0px 10px 10px;
	}

	.van-tag {
		margin: 0px 10px 0px 10px;
	}

	.span {
		font-weight: normal;
		font-size: 0.9em;
	}

	.button-fixed1 {
		display: inline-block;
		width: 250px;
		margin: 10px 0px 10px 0px;
		position: fixed;
		z-index: 10;
		top: 210px;
		/* left:20px; */
	}

	.button-fixed2 {
		display: inline-block;
		width: 100px;
		margin: 10px 0px 10px 0px;
		position: fixed;
		z-index: 10;
		top: 210px;
		left: 220px;
	}

	.van-tab1 {
		margin-bottom: 60px;
	}

	.van-tab2 {
		margin-bottom: 60px;
	}

	.div-box2 {
		font-weight: normal;
		font-size: 0.9em;
		display: flex;

		/* flex-direction 属性用来决定主轴的方向（即项目的排列方向） */
		flex-direction: row;
		/* 子项在flex容器垂直居中 */
		justify-content: space-between;
		align-items: center;
		margin-right: 20px;
	}

	.nickname {

		display: inline-block;
		/* flex-direction: column;*/
	}

	.van-image1 {
		margin-top: 6px;
	}

	/* ul>li {
		float: left;
		list-style: none;
	}

	.image {
		display: inline-block;
		width: 200px;
	}

	.blind-box-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 800px;
		height: 440px;
	}

	.title {
		display: inline-block;
	}

	.demo-image {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	.oneGrid-b {
		margin-right: 68px;

	}

	/* #threeGrid {
		margin-left: 68px;
	} */
</style>
